<template>
  <div class="app">
    <!-- <h2>当前计数：{{ counter }}</h2>
    <button @click="add">+1</button> -->
    <!-- <test></test> -->
    <!-- <h2>App</h2> -->
    <!-- 站位 -->
    <!-- <router-link to="/main">主要</router-link>
    <router-link to="/login">登录</router-link> -->
    <el-config-provider :locale="zhCn">
      <router-view></router-view>
    </el-config-provider>

    <!-- <el-row class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </el-row> -->
  </div>
</template>
<script setup lang="ts">
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// import test from './Test.vue'
// import { ref, nextTick } from 'vue'
// const counter = ref(0)
// function add() {
//   counter.value += 100 //数据改变
//   // // 立即进行dom操作  dom更新是异步的。
//   // const titleE1 = document.querySelector('h2')
//   // console.log(titleE1?.textContent)
//   // dom更新完执行nextTick
//   nextTick(() => {
//     const titleE1 = document.querySelector('h2')
//     console.log(titleE1?.textContent)
//   })
// }
</script>
<style scoped lang="less">
.app {
  width: 100vw;
  height: 100vh;
}
//改子组件 根元素的直接选
// // scoped 属性
// .test {
//   color: blue;
// }
// // 里面的不可直接选中 要加：deep
// :deep(.title) {
//   font-size: 100px;
// }
</style>
